---
description: Learn how use Vue bindings for the Triplit client in your app.
---

import { Tabs, Tab, Callout } from 'nextra-theme-docs';
import CreateTriplitAppTabs from '../../components/CreateTriplitAppTabs.mdx';

# Vue

### New projects

The fast way to get started with Triplit is to use Create Triplit App which will scaffold a Vue application with Triplit. Choose `Vue` when prompted for the frontend framework.

<CreateTriplitAppTabs />

### Existing projects

If have an existing Vue project, you install the hooks provided by `@triplit/vue`:

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>

  <Tab>
    ```bash copy
    npm i @triplit/vue
    ```
  </Tab>
    <Tab>
    ```bash copy
    pnpm add @triplit/vue
    ```
  </Tab>
  <Tab>
    ```bash copy
    yarn add @triplit/vue
    ```
  </Tab>
    <Tab>
    ```bash copy
    bun add @triplit/vue
    ```
  </Tab>
</Tabs>

## useQuery

The `useQuery` hook subscribes to the provided query inside your Vue component and will automatically unsubscribe from the query when the component unmounts.

The result of the hook is a [reactive](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#reactive) object with the following properties:

- `results`: An array of entities that satisfy the query.
- `fetching`: A boolean that will be `true` initially, and then turn `false` when either the local fetch returns cached results or if there were no cached results and the remote fetch has completed.
- `fetchingLocal`: A boolean indicating whether the query is currently fetching from the local cache.
- `fetchingRemote`: A boolean indicating whether the query is currently fetching from the server.
- `error`: An error object if the query failed to fetch.

Because `useQuery` uses the `reactive` function from Vue, it can't be destructured in the `setup` block. Instead, you can access the properties directly from the returned object.

```vue filename="App.vue"
<script setup lang="ts">
import { useQuery } from '@triplit/vue';
import Todo from './components/Todo.vue';
import { computed } from 'vue';
import { client } from './triplit';

const state = useQuery(client, client.query('todos'));
</script>

<template>
  <div>
    <h1>Todos</h1>
    <span v-if="state.fetching">Loading...</span>
    <span v-else-if="state.error">Error: {{ state.error.message }}</span>
    <ul v-else-if="state.todos">
      <Todo
        v-for="todo in state.todos"
        :key="todo.id"
        :id="todo.id"
        :text="todo.text"
        :completed="todo.completed"
      />
    </ul>
  </div>
</template>
```

## useConnectionStatus

The `useConnectionStatus` hook subscribes to changes to the connection status of the client and will automatically unsubscribe when the component unmounts.

```vue filename="ConnectionStatus.vue"
<script setup lang="ts">
import { useConnectionStatus } from '@triplit/vue';
import { client } from './triplit';

const connection = useConnectionStatus(client);
</script>
<template>
  <div>
    <span v-if="connection.status === 'OPEN'">🟢</span>
    <span v-else-if="connection.status === 'CLOSED'">🔴</span>
    <span v-else>🟡</span>
  </div>
</template>
```
